<html lang="vi"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">


    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,300italic,400italic,600italic,700italic&amp;subset=vietnamese,latin" rel="stylesheet" type="text/css">

    <link rel="stylesheet" href="css/owlcarousel/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owlcarousel/assets/owl.theme.default.min.css">
    <link rel="stylesheet" type="text/css" href="css/fancybox/jquery.fancybox.min.css" media="screen">

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,500,700,900|Roboto:300,400,500,700,900|Open+Sans:300,400,500,700,900&amp;subset=vietnamese" rel="stylesheet">
    <!-- <link href="css/non-responsive.css" rel="stylesheet" /> -->




    <link type="text/css" rel="stylesheet" href="css/bxslider/jquery.bxslider.css">

    <!-- animate -->
    <link type="text/css" rel="stylesheet" href="css/animate/animate.css">




    <link href="css/style.css" rel="stylesheet">




</head>

<body class="subpage">
<!-- Facebook Pixel Code -->


<!-- End Facebook Pixel Code -->
<!-- Global site tag (gtag.js) - Google Analytics -->





<!-- Global site tag (gtag.js) - Google Analytics -->


<div id="fb-root"></div>




<!-- Your customer chat code -->
<div class="fb-customerchat" page_id="971848322966974" theme_color="#ffc300" logged_in_greeting="Hi! How can we help you?" logged_out_greeting="Hi! How can we help you?">
</div>
<header>
    <div class="topbar">
        <a href="index.html" class="left">首页</a>
<!--        <a href="http://yhvn.vn/lien-he.html" class="right">联系我</a>-->
    </div>
</header>

<section id="wrapper">

    <section class="main">
        <div class="container"  id="app">
            <div class="module product-detail">

                <div class="product_page">
                    <div class="titleproduct">
                        <h1>{{product.proName}}</h1>
                    </div>

                    <div class="imageproduct">
                        <img :src="product.proImg" alt="自动计时器">
                    </div>

                    <div class="priceproduct">
                        <div class="price">
                            {{product.proPrice}}元					</div>

                        <div class="priceinfo">
                            <ul>
                                <li>
                                    <p>原价</p>
                                    {{product.proCostPrice}}元					</li>
                                <li>
                                    <p>折扣</p>
                                    	{{product.zk}}%			</li>
                                <li>
                                    <p>节省</p>
                                    {{product.js}}						</li>

                            </ul>
                        </div>

<!--                        <div class="countdown">-->
<!--                            <strong>1266 người đã mua</strong>-->
<!--                            <div class="timeDown">-->
<!--                                <span id="days">00</span> ngày							<span id="hours">00</span> tiếng							<span id="minutes">00</span> phút							<span id="seconds">00</span> giây						</div>-->
<!--                        </div>-->

                        <div class="gotobuy">
                            <a class="gotobuy" href="http://yhvn.vn/#buy">立即购买</a>
                        </div>
                    </div>

                    <div class="product-tab">
                        <div class="box-heading">
                            <span>购买手册</span>
                        </div>

                        <div class="tab-content">
                            <div v-html="product.proContext"></div>
                        </div>
                    </div>

                    <div class="product-tab">
                        <div class="box-heading">
                            <span>商品介绍</span>
                        </div>

                        <div v-html="product.proIntroduce" class="tab-content">

<!--                            <p><img alt="" src="http://yhvn.vn/images/Upload/images/6(3).jpg" style="height:100%; width:100%"><img alt="" src="http://yhvn.vn/images/Upload/images/7.jpg" style="height:100%; width:100%"><img alt="" src="http://yhvn.vn/images/Upload/images/8.jpg" style="height:100%; width:100%"><img alt="" src="http://yhvn.vn/images/Upload/images/9.jpg" style="height:100%; width:100%"><img alt="" src="http://yhvn.vn/images/Upload/images/10.jpg" style="height:100%; width:100%"><img alt="" src="http://yhvn.vn/images/Upload/images/11.jpg" style="height:100%; width:100%"><img alt="" src="http://yhvn.vn/images/Upload/images/12.jpg" style="height:100%; width:100%"><img alt="" src="http://yhvn.vn/images/Upload/images/13.jpg" style="height:100%; width:100%"><img alt="" src="http://yhvn.vn/images/Upload/images/14.jpg" style="height:100%; width:100%"><img alt="" src="http://yhvn.vn/images/Upload/images/15.jpg" style="height:100%; width:100%"><img alt="" src="http://yhvn.vn/images/Upload/images/16.jpg" style="height:100%; width:100%"><img alt="" src="http://yhvn.vn/images/Upload/images/17(1).jpg" style="height:100%; width:100%"><img alt="" src="http://yhvn.vn/images/Upload/images/18.jpg" style="height:100%; width:100%"><img alt="" src="http://yhvn.vn/images/Upload/images/19.jpg" style="height:100%; width:100%"><img alt="" src="http://yhvn.vn/images/Upload/images/20.jpg" style="height:100%; width:100%"><img alt="" src="http://yhvn.vn/images/Upload/images/21.jpg" style="height:100%; width:100%"><img alt="" src="http://yhvn.vn/images/Upload/images/23.jpg" style="height:100%; width:100%"></p>-->
                        </div>
                    </div>

                    <div class="product-tab" id="buy">
                        <div class="box-heading">
                            <span>填写信息</span>
                        </div>

                        <div class="tab-content">
                            <form class="contact_step" id="order-form" action="http://yhvn.vn/dong-ho-co-tu-dong-wlisth-p153.html" method="post">							<div class="contact_opage">

                                <dl>
                                    <dt><span>*</span> 产品:</dt>
                                    <dd class="product_name">
                                        {{product.proName}}																	</dd>
                                </dl>

                                <dl>
                                    <dt><span>*</span> 主图:</dt>
                                    <dd class="order_type">
                                        <label for="type277">
                                            <input id="type277" type="radio" name="OrderForm[type]" value="0" checked="">
                                            <img :src="product.proImg" alt="Đồng hồ cơ tự động WLISTH">
                                            <span>Phong cách 1</span>
                                        </label>
<!--                                        <label for="type254">-->
<!--                                            <input id="type254" type="radio" name="OrderForm[type]" value="1">-->
<!--                                            <img src="http://yhvn.vn/images/attachment/thumb/283.jpg" alt="Đồng hồ cơ tự động WLISTH">-->
<!--                                            <span>Phong cách 2</span>-->
<!--                                        </label>-->

                                    </dd>
                                </dl>

                                <dl>
                                    <dt><span>*</span> 客户名称:</dt>
                                    <dd>
                                        <input v-model="product.name" placeholder="请填写客户名称" name="OrderForm[name]" id="OrderForm_name" type="text">																			</dd>
                                </dl>

                                <dl>
                                    <dt><span>*</span> 电话号码:</dt>
                                    <dd>
                                        <input v-model="product.phone" placeholder="请填写联系方式" name="OrderForm[mobile]" id="OrderForm_mobile" type="text">																			</dd>
                                </dl>

                                <dl>
                                    <dt><span>*</span> 收货地址:</dt>
                                    <dd>
                                        <textarea v-model="product.address" placeholder="请填写收货地址" name="OrderForm[address]" id="OrderForm_address"></textarea>																			</dd>
                                </dl>

                                <dl>
                                    <dt><span>*</span> 总金额:</dt>
                                    <dd>
                                        <input type="text" class="bold" disabled="" :value="product.proPrice">
                                    </dd>
                                </dl>

                                <dl>
                                    <dt><span>*</span> 付款方式:</dt>
                                    <dd class="radio_method">
                                        <input type="radio" value="680.000 đ" checked="checked">
                                        付款单									</dd>
                                </dl>

                                <div class="button_submit">
                                    <button v-on:click="insOrder"  type="button"> 提交订单</button>
                                </div>
                            </div>

                            </form>					</div>
                    </div>

                </div>
            </div>
        </div>
    </section>
</section>

<footer>
    <div class="bom">
        <p>&nbsp;</p>
    </div>
    <p></p>
</footer>

<!--<div class="fixBox">-->
<!--&lt;!&ndash;    <a class="fixitem backtotop" href="http://yhvn.vn/#">Về phía trên</a>&ndash;&gt;-->
<!--&lt;!&ndash;    <a class="fixitem gotobuy" href="http://yhvn.vn/#buy">Lập tức mua bán</a>&ndash;&gt;-->
<!--</div>-->


<script src="adminy/js/vue.js"></script>
<script src="adminy/js/jquery-3.3.1.min.js"></script>
<script>
    var id = GetQueryString("id")
    var app = new Vue({
        el:"#app",
        data:{
            product:{}
        },
        methods:{
            insOrder:function(envent){
                console.log("提交订单")
                $.ajax({
                    url:"/watchsystem/order/insert",
                    method: 'post',
                    data:{
                        "productId":id,
                        "name":this.product.name,
                        "phone":this.product.phone,
                        "address":this.product.address,
                        "price":this.product.proPrice
                    },
                    success:function(data){
                        if(data.code == 200){
                           alert("成功")
                        }else {
                            alert(data.msg)
                        }
                    }
                })
            }
        }
    })


    $.ajax({
        url: "/watchsystem/product/select",
        method: 'post',
        data: {
            "id": id
        },
        success: function (data) {
            console.log(data)
            app.product = data.data
            console.log(app.product)
            app.product.zk = ((data.data.proCostPrice-data.data.proPrice)/data.data.proCostPrice).toFixed(2)*100;
            app.product.js = data.data.proCostPrice-data.data.proPrice
        }
    })

    /**
     * 获取请求参数
     * @param name
     * @returns {string|null}
     * @constructor
     */
    function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }
</script>


</body></html>